import { deepMerge } from './util';
import { debounce } from '@/utils';
const highcharts = window.Highcharts;

// 基础柱形图
class PieThree {
  static defaultOptions = {
    colors: [
      '#12C7FF',
      '#25FF0D',
      '#FF2E74',
      '#6115F9',
      '#10FFDC',
      '#df16fe',
      '#F4FF00',
      '#FF8700',
    ],
    pie: {
      allowPointSelect: false, // 禁用点击
      cursor: 'pointer',
      depth: 15,
      showInLegend: true,
      size: '100%', // 外圈直径大小
      innerSize: '50%', // 内圈直径大小
      center: ['50%', '50%'],
      dataLabels: {
        enabled: false, //是否显示饼图的线形tip
        useHTML: true,
        distance: 1,
        borderColor: '#fff',
        align: 'center',
        position: 'right',
        format: '{point.y}%',
        color: '#ffffff',
        style: {
          textOutline: 'none',
          fontSize: '14px',
          fontFamily: 'Arial',
        },
      },
      tooltipUnit: '%', // tooltip单位
    },
    options3d: {
      enabled: true, //使用3d功能
      alpha: 60, //延y轴向内的倾斜角度
      beta: 0,
    },
    title: {
      text: '',
    },
    subtitle: {
      text: '',
    },
    // 柱状图高度，请按照min <= max
    height: {
      min: 10,
      max: 20,
    },
    // 相关共用配置可以提出，在以下函数中引用
  };
  constructor(container, options) {
    this.container = container;
    this.options = deepMerge({}, PieThree.defaultOptions, options);
    this.resizeHandler = debounce(() => {
      this.updateOptions();
    });
    window.addEventListener('resize', this.resizeHandler);
  }

  initOption() {
    const { colors, pie, options3d, title, subtitle, height } = this.options;
    const max = Math.max(...this.data.map((item) => item.y));
    const min = Math.min(...this.data.map((item) => item.y));
    const gap = max - min;
    this.data.forEach((item) => {
      item.h = height.min + ((item.y - min) / gap) * (height.max - height.min);
    });
    // 修改3d饼图绘制过程
    var each = highcharts.each,
      round = Math.round,
      cos = Math.cos,
      sin = Math.sin,
      deg2rad = Math.deg2rad;
    highcharts.wrap(highcharts.seriesTypes.pie.prototype, 'translate', function(
      proceed,
    ) {
      proceed.apply(this, [].slice.call(arguments, 1));
      // Do not do this if the chart is not 3D
      if (!this.chart.is3d()) {
        return;
      }
      var series = this,
        chart = series.chart,
        options = chart.options,
        seriesOptions = series.options,
        depth = seriesOptions.depth || 0,
        options3d = options.chart.options3d,
        alpha = options3d.alpha,
        beta = options3d.beta,
        z = seriesOptions.stacking
          ? (seriesOptions.stack || 0) * depth
          : series._i * depth;
      z += depth / 2;
      if (seriesOptions.grouping !== false) {
        z = 0;
      }
      each(series.data, function(point) {
        var shapeArgs = point.shapeArgs,
          angle;
        point.shapeType = 'arc3d';
        var ran = point.options.h;
        shapeArgs.z = z;
        shapeArgs.depth = depth * 0.75 + ran;
        shapeArgs.alpha = alpha;
        shapeArgs.beta = beta;
        shapeArgs.center = series.center;
        shapeArgs.ran = ran;
        angle = (shapeArgs.end + shapeArgs.start) / 2;
        point.slicedTranslation = {
          translateX: round(
            cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad),
          ),
          translateY: round(
            sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad),
          ),
        };
      });
    });
    (function(H) {
      H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
        // Run original proceed method
        var ret = proceed.apply(this, [].slice.call(arguments, 1));
        ret.zTop = (ret.zOut + 0.5) / 100;
        return ret;
      });
    })(highcharts);
    highcharts.chart({
      chart: {
        renderTo: this.container,
        animation: false,
        backgroundColor: 'none',
        type: 'pie', //饼图
        margin: [0, 0, 0, 0],
        options3d,
        events: {
          load: function() {
            var each = highcharts.each,
              points = this.series[0].points;
            each(points, function(p) {
              p.graphic.attr({
                translateY: -p.shapeArgs.ran,
              });
              p.graphic.side1.attr({
                translateY: -p.shapeArgs.ran,
              });
              p.graphic.side2.attr({
                translateY: -p.shapeArgs.ran,
              });
            });
          },
        },
      },
      legend: {
        enabled: false, // 关闭图例
      },
      title,
      subtitle,
      tooltip: {
        trigger: 'axis',
        padding: 10,
        backgroundColor: 'rgba(0,28,66,0.93)',
        format: '{point.name}：{point.y}' + pie.tooltipUnit,
        borderColor: 'rgba(255, 255, 255, 0.1)',
        style: {
          color: '#fff',
          fontSize: '16px',
          width: 100,
          overflow: 'break',
        },
      },
      plotOptions: {
        pie: {
          ...pie,
          colors,
        },
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
      series: [
        {
          type: 'pie',
          name: '占比',
          data: this.data,
        },
      ],
    });
  }

  updateOptions(options = {}) {
    this.options = deepMerge({}, this.options, options);
    this.initOption();
  }

  updateData(data, options = {}) {
    this.data = data;
    this.updateOptions(options);
  }

  destroy() {
    window.removeEventListener('resize', this.resizeHandler);
  }
}

export default PieThree;
